# Component: Accordion

Core CMS Media & Archive Navigation

![[Pasted image 20260426073802.png]]

### BEM Anatomy

| Type      | Class Name               | Description                                                                  |
| --------- | ------------------------ | ---------------------------------------------------------------------------- |
| ==Block== | `.as-accordion`          | Main container for the accordion logic.                                      |
| Modifier  | `--media-archive`        | Specific theme for the Media Archive; forces 1st letter uppercase on titles. |
| Modifier  | `--media-archive-detail` | Removes side borders and radius for a "flush" detail view.                   |
| Element   | `__title`                | The clickable header text (Tag name).                                        |
| Element   | `__content`              | The expandable wrapper containing the list or grid.                          |
| Element   | `__list`                 | Wrapper for items when displayed in **List Mode**.                           |
| Element   | `__grid`                 | Wrapper for items when displayed in **Grid Mode**. Uses Bootstrap gutters.   |
| Element   | `__item`                 | The individual media item (StreamMediaListItem or Card).                     |
| Modifier  | `__item--active`         | Applied when an item matches the current selection (Ticks comparison).       |
| Modifier  | `__item--description`    | Identifies the description accordion-item                                    |
| Modifier  | `__item--subtitles`      | Identifies the subtitle accordion-item                                       |
| Element   | `__pagination`           | Centered container for the "Load More" action.                               |
| Element   | `__state`                | Container for Empty or Loading states (modifiers: `--empty`, `--loading`).   |
| Element   | `__button`               | The buttons in the pagination                                                |
| Modifier  | `__button--load-more`    | The load-more button                                                         |

### Implementation Reference

##### Generated HTML

```html
<!-- Simplified output of the Blazor Accordion -->
<div class="as-accordion as-accordion--media-archive">
    <!-- Item Header -->
    <span class="as-accordion__title">Category Name</span>

    <!-- Content Area -->
    <div class="as-accordion__content">
        <div class="as-accordion__grid row">
            <div class="col-md-4">
                <div class="as-accordion__item as-accordion__item--active">...</div>
            </div>
        </div>

        <div class="as-accordion__pagination">
            <button class="as-accordion__button as-accordion__button--load-more">...</button>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-accordion {
  &__item {
    &--active { border-color: var(--bs-primary); }
  }
  &__grid {
    --bs-gutter-x: #{$spacer};
    --bs-gutter-y: #{$spacer};
  }
  &--media-archive {
    .as-accordion__title:first-letter {
      text-transform: uppercase;
    }
  }
}
```

